<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .center{
            width: 1200px;
            margin: 0 auto;
        }
        #footer_center p{
            margin: 0;
        }
        #footer_center h3{
            color: white;
        }
        body{
            background-color: rgb(241,242,243);
        }
        .el-header{
            background-color: white;
        }
    </style>
</head>
<body>
<div id="app" >
    <el-container>
       <my-header></my-header>
        <el-main class="center" >
            <el-row gutter="20">
                <el-col span="4">

                    <el-card style="height: 500px">
                        <p @click="location.href='personal.html'">个人信息</p>
                        <p style="color: orange" >稿件管理</p>
                    </el-card>
                </el-col>
                <el-col span="20">
                    <el-card>
                        <!--标签页卡开始-->
                        <el-tabs v-model="type"  type="card" @tab-click="handleClick">
                            <el-tab-pane label="食谱" name="1"></el-tab-pane>
                            <el-tab-pane label="视频" name="2"></el-tab-pane>
                            <el-tab-pane label="资讯" name="3"></el-tab-pane>
                        </el-tabs>
                        <!--标签页卡结束-->
                        <el-button type="primary" @click="location.href='/postArticle.html?type='+v.type">发帖</el-button>
                        <!--内容列表开始-->
                        <el-table :data="contentArr" border>
                            <el-table-column label="标题" width="150px"
                                prop="title" align="center"></el-table-column>
                            <el-table-column label="封面" width="60px">
                                <template slot-scope="scope">
                                   <img :src="scope.row.imgUrl" width="50px">
                                </template>
                            </el-table-column>
                            <el-table-column v-if="type!=2" label="摘要" width="300px" align="center">
                                <template slot-scope="scope">
                                    <!--scope.row代表当前行对应的数组里面的对象-->
                                    <div v-html="scope.row.brief"></div>
                                </template>
                            </el-table-column>
                            <el-table-column label="类型"
                                             prop="categoryName" align="center"></el-table-column>
                            <el-table-column label="浏览量"
                                             prop="viewCount" align="center"></el-table-column>
                            <el-table-column label="回复量"
                                             prop="commentCount" align="center"></el-table-column>
                            <el-table-column label="创建时间" width="300"
                                             prop="createTime" align="center"></el-table-column>
                            <el-table-column label="操作"  width="200px" fixed="right"
                                             align="center">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="success"
                                               @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                    <el-button size="mini" type="danger"
                                               @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!--内容列表结束-->
                    </el-card>
                </el-col>
            </el-row>
        </el-main>
        <el-footer style="height: 280px;background-color: #2f3234;padding:50px 0">
            <my-footer></my-footer>
        </el-footer>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<!--引入Axios-->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<!--引入自己的js文件-->
<script src="js/my-header.js"></script>
<script src="js/my-footer.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                type:'1',
                contentArr:[]
            }
        },
        methods: {
            handleDelete(i,content){
                if (confirm("您确定删除此内容吗?")){
                    //发出删除请求
                    axios.post("/v1/contents/"+content.id+"/delete").then(function (response) {
                        if (response.data.code==1){
                            v.$message.success("删除完成!");
                            v.contentArr.splice(i,1);//删除页面中的内容
                        }
                    })
                }

            },
            handleEdit(i,content){
                location.href="/postArticle.html?id="+content.id;
            },
            handleClick(tab, event) {
                console.log(v.type);
                //this不是所有场景都能取代v, 只有在created方法中,this代表的是Vue对象
                //其它位置this代表的是window对象
                this.loadList(v.type);
            },
            loadList(type){
                //发出获取内容的请求
                axios.get("/v1/contents/"+type+"/management").then(function (response) {
                    if (response.data.code==1){
                        v.contentArr = response.data.data;
                    }else{
                        alert("请先登录!");
                        location.href = "/login.html";
                    }
                })
            }
        },
        created:function () {
            //created方法是在Vue对象初始化过程中调用的方法,在方法中不能直接调用v,否则会报错
            //需要访问v里面的内容时,使用this代替
            this.loadList(this.type);
        }
    })
</script>
</html>